<template>
  <div class="main">
    <mine-title>导入模型</mine-title>
    <div class="content" v-loading="loading">
      <div class="form-limit">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <el-form-item label="模型类型：" prop="projectType">
            <el-radio-group v-model="form.projectType">
              <el-radio
                v-for="(item, index) in classifyList.slice(
                  classifyList.length - 1
                )"
                :key="index"
                :label="item.id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="实现方式：" prop="modelFileType">
            <el-radio-group
              v-model="form.modelFileType"
              @change="implementationModeChange"
            >
              <el-radio
                v-for="(item, index) in implementationModeList"
                :key="index"
                :label="item.id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="模型名称：" prop="name">
            <el-input
              v-model="form.name"
              clearable
              size="small"
              placeholder="请输入模型名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型描述：" prop="descr">
            <el-input
              type="textarea"
              :rows="3"
              v-model="form.descr"
              size="small"
              placeholder="请输入模型描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传模型：" :required="true">
            <mine-upload ref="upload" :fileType="uploadFileType"></mine-upload>
            <mine-button
              secondary
              class="margin--top--ten"
              @click="downloadSample"
              :disabled="!this.form.modelFileType"
              :loading="downloading"
              >下载代码规范文档<i class="el-icon-download el-icon--right"></i
            ></mine-button>
          </el-form-item>
          <el-form-item class="form-btn-row" label="">
            <mine-button secondary @click="cancelLis">取 消</mine-button>
            <mine-button type="primary" @click="confirmLis">保 存</mine-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mappingMixins } from "../mixins";
export default {
  mixins: [mappingMixins],

  data() {
    return {
      uploadFileType: "",
      form: {
        projectType: "",
        modelFileType: "",
        name: "",
        descr: "",
      },
      rules: {
        projectType: {
          required: true,
          message: "请选择模型类型",
          trigger: "change",
        },
        modelFileType: {
          required: true,
          message: "请选择实现方式",
          trigger: "change",
        },
        name: { required: true, message: "请输入模型名称", trigger: "blur" },
        descr: { required: true, message: "请输入模型描述", trigger: "blur" },
      },
      loading: false,
      downloading: false,
    };
  },

  methods: {
    // 类型改变
    implementationModeChange() {
      if (this.form.modelFileType === "sklearn") {
        this.uploadFileType = ".sav";
      } else if (this.form.modelFileType === "matlab") {
        this.uploadFileType = ".zip";
      }
      this.$refs.upload.clear();
    },

    // 取消按钮被点击
    cancelLis() {
      this.$mineConfirm("确认取消导入模型？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.go(-1);
        })
        .catch((error) => {});
    },

    // 保存按钮被点击
    confirmLis: function () {
      if (!this.$common.doSubmit("form", this)) return;

      if (!this.$refs.upload.fileList.length) {
        this.$message.warning("请上传模型文件");
        return;
      }
      this.uploadModel();
    },

    // 上传模型
    uploadModel: async function () {
      this.$refs.upload.loadingStatus = "uploading";
      var formData = new FormData();
      formData.append("File", this.$refs.upload.fileList[0].raw);
      formData.append("creator", this.$store.getters.userName || "");
      formData.append("descr", this.form.descr);
      formData.append("projectType", this.form.projectType);
      formData.append("name", this.form.name);
      formData.append("modelFileType", this.form.modelFileType);
      try {
        const res = await this.$store.dispatch(
          "proAdminImportModelTaskSave",
          formData
        );
        const result = res.data || {};
        if (result.success) {
          this.$refs.upload.loadingStatus = "success";
          this.$message({ type: "success", message: "文件上传成功" });
          this.$router.go(-1);
        } else {
          this.$refs.upload.loadingStatus = "error";
          this.$message({ type: "error", message: "文件上传失败" });
        }
      } catch (e) {
        console.error(e);
      }
    },

    // 下载模板
    async downloadSample() {
      const params = {
        projectType: this.form.modelFileType,
      };
      this.downloading = true;
      try {
        await this.$store.dispatch(
          "modelManageImportModelTaskDownloadModelTemplate",
          params
        );
      } catch (e) {
        console.error(e);
      }
      this.downloading = false;
    },
  },

  created() {
    // 设置面包屑导航
    this.$store.commit("SET_BREADCRUMB", [
      { title: "前沿算法诊断", path: "/model/list" },
      { title: "导入模型", path: "" },
    ]);
  },
};
</script>
<style lang="less" scoped>
</style>
